
import React, { useState, useEffect, useCallback } from 'react';
import { Modal, Form, Input, Select, message } from 'antd';
import type { MenuItem } from '../types/menu';
import http from '../api/http';


interface MenuAddModalProps {
  visible: boolean; // 控制弹框显示/隐藏
  onCancel: () => void; // 取消回调
  onSuccess: () => void; // 添加成功回调（用于刷新列表）
}


type MenuLevel = 'first' | 'second';
const Add: React.FC<MenuAddModalProps> = ({ visible, onCancel, onSuccess }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [menuType, setMenuType] = useState<MenuLevel | ''>(''); // 选中的菜单类型
  const [parentMenuList, setParentMenuList] = useState<MenuItem[]>([]); // 上级菜单选项列表

  // 1. 获取所有一级菜单（用于上级菜单下拉框）
  const fetchFirstLevelMenus = useCallback(async () => {
    try {
      const res = await http.get<Array<MenuItem>>('Menus/All');
      if (res.code === '1') {
        // 只保留一级菜单（parentId=0）
        const firstLevelMenus = res.data?.filter(menu => menu.parentId === 0) || [];
        setParentMenuList(firstLevelMenus);
      }
    } catch (error) {
      message.error('获取上级菜单列表失败');
      console.error('上级菜单查询错误:', error);
    }
  }, []);

  
  useEffect(() => {
    if (visible) {
      fetchFirstLevelMenus();
      form.resetFields();
      setMenuType('first'); // 默认选中一级菜单
    }
  }, [visible, fetchFirstLevelMenus, form]);

 
  const handleMenuTypeChange = useCallback((value: MenuLevel) => {
    setMenuType(value);
    
    // 切换类型时重置相关字段，避免数据残留
    if (value === 'first') {
      // 切换到一级菜单：重置parentId为0，清除url
      form.setFieldsValue({
        parentId: 0,
        url: ''
      });
    } else {
      // 切换到二级菜单：默认选中第一个一级菜单作为父菜单
      form.setFieldsValue({
        parentId: parentMenuList[0]?.menuId || 0
      });
    }
  }, [form, parentMenuList]);

  // 4. 提交添加菜单（调用接口）
  const handleSubmit = async () => {
    try {
      setLoading(true);
      // 表单验证
      const values = await form.validateFields();
      
    
      const submitData: Omit<MenuItem, 'menuId' | 'lastTime'> = {
        menuName: values.menuName,
        parentId: values.parentId,
        icon: values.icon,
        url:'',
       lastTime:new Date(),
        // 二级菜单才传url，一级菜单不传（避免字段冗余）
        ...(menuType === 'second' && { url: values.url })
      };

      
     http.post('Menus',submitData).then(res=>{
        if(res.code=='1'){
            message.success(res.msg)
              onSuccess(); // 通知主页面刷新列表
              onCancel(); // 关闭弹框
        }
     })
    } catch (error) {
      console.error('菜单添加错误:', error);
      message.error('表单验证失败或请求异常');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      title="添加菜单"
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      confirmLoading={loading}
      maskClosable={false} 
      width={500}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{ parentId: 0, menuType: 'first' }} 
      >
        {/* 菜单名称 */}
        <Form.Item
          name="menuName"
          label="菜单名称"
          rules={[{ required: true, message: '请输入菜单名称' }, { max: 50, message: '名称不超过50字符' }]}
        >
          <Input placeholder="请输入菜单" />
        </Form.Item>

        {/* 菜单类型（一级/二级）- 核心联动触发源 */}
        <Form.Item
          name="menuType"
          label="菜单类型"
          rules={[{ required: true, message: '请选择菜单类型' }]} // 添加必填验证
        >
          <Select
            placeholder="请选择菜单类型"
            onChange={handleMenuTypeChange} // 使用优化后的变更处理函数
            allowClear={false} // 不允许清空，确保总有一个选中值
          >
            <Select.Option value="first">一级菜单</Select.Option>
            <Select.Option value="second">二级菜单</Select.Option>
          </Select>
        </Form.Item>

        {/* 上级菜单 - 类型选择后才显示 */}
        <Form.Item
          name="parentId"
          label="上级菜单"
          rules={[{ required: true, message: '请选择上级菜单' }]}
          hidden={!menuType} // 未选类型时隐藏
        >
          <Select placeholder="请选择上级菜单">
            {menuType === 'first' && (
              <Select.Option value={0}>顶级菜单</Select.Option>
            )}
            {/* 二级菜单的上级为所有一级菜单 */}
            {menuType === 'second' && parentMenuList.map(menu => (
              <Select.Option key={menu.menuId} value={menu.menuId}>
                {menu.menuName}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        {/* 图标类名 */}
        <Form.Item
          name="icon"
          label="图标类名"
          rules={[{ required: true, message: '请输入图标类名' }]}
          tooltip="使用Element UI图标类名，例如：el-icon-s-operation"
        >
          <Input placeholder="请输入图标" />
        </Form.Item>

        {/* 访问地址 - 仅二级菜单显示 */}
        <Form.Item
          name="url"
          label="访问地址"
          rules={[{ required: menuType === 'second', message: '二级菜单必须填写访问地址' }]}
          hidden={menuType !== 'second'} // 一级菜单隐藏，二级菜单显示
        
        >
          <Input placeholder="请输入地址" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export { Add };